<template>
	<div class="bg-white px-3" style="margin: -20px;margin-top: -1rem;margin-bottom: 0 !important;">

		<button-search class="pt-3" >
			
			<template #right>
				<div class="d-flex algin-items-center">
					<el-date-picker
					size="mini"
					v-model="search.time"
					type="daterange"
					range-separator="-"
					start-placeholder="开始日期"
					end-placeholder="结束日期">
					</el-date-picker>
					<el-input class="ml-2" v-model="search.keyword" 
					size="mini"
					style="width: 200px;"
					placeholder="请输入订单号"></el-input>
					<el-button size="mini" class="ml-2"
					type="info"
					@click="">搜索</el-button>
				</div>
				
			</template>
		</button-search>
		<!-- 商品列表 -->
		<el-table border class="mt-3" :data="tableData" style="width: 100%"
		@selection-change="handleSelectionChange">
			<el-table-column type="selection" width="45" align="center">
			</el-table-column>
			<el-table-column label="订单编号" width="200" prop="name">
			</el-table-column>
			
			<el-table-column prop="order" label="用户名" align="center">
			</el-table-column>
			<el-table-column prop="order" label="开票金额" align="center">
			</el-table-column>
			<el-table-column prop="order" label="抬头" align="center">
			</el-table-column>
			<el-table-column prop="content" label="发票内容" align="center">
			</el-table-column>
			<el-table-column prop="code" label="纳税人识别号" align="center">
			</el-table-column>
			<el-table-column prop="create_time" label="创建时间" align="center">
			</el-table-column>
		
			<el-table-column label="操作" width="150">
				<template slot-scope="scope">
					<el-button-group>
						<el-button type="danger" size="mini" 
						@click="deleteItem(scope)">
							删除
						</el-button>
					</el-button-group>
				</template>
			</el-table-column>
		</el-table>
		<div style="height: 60px;"></div>
		<el-footer class="d-flex border-top align-items-center px-0 position-fixed bg-white" style="bottom: 0;left: 200px;right: 0;z-index: 10;">
			<div class="px-2" style="flex: 1;">
				<el-pagination
				 @size-change="handleSizeChange" 
				 @current-change="handleCurrentChange" 
				 :current-page="currentPage"
				 :page-sizes="[100, 200, 300, 400]" 
				 :page-size="100" 
				 layout="total, sizes, prev, pager, next, jumper" 
				 :total="400">
				</el-pagination>
			</div>
		</el-footer>

	</div>
</template>

<script>
	import buttonSearch from "@/components/common/button-search.vue"

	export default {
		
		components: {
			buttonSearch,
		},
		

		data() {
			return {
				
				tableData: [],

				//多选checkbox
				multipleSelection: [],
				//当前页
				currentPage: 1,
				
				search: {
					time: '',
					keyword: ''
				}
				
			}
		},
		

		methods: {
			
			//分页方法
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
			},
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`);
			},

			//删除当前规格
			deleteItem(scope) {
				this.$confirm('此操作将删除该规格, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.tableData.splice(scope.$index)
					this.$message({
					type: 'success',
					message: '删除成功!'
					});
				}).catch(() => {
					this.$message({
					type: 'info',
					message: '已取消删除'
					});
				});
			},

			changeStatus(item) {
				//todo 请求服务端
				item.status = !item.status
				this.$message({
					message: item.status ? '启用成功' : '禁用成功',
					type: 'success'
				})
			},
			
			handleSelectionChange(val) {
				this.multipleSelection = val;
			}
	
		}
	}
</script>

<style>
.sku-list-item>i{
	display: none;
}
.sku-list-item:hover{
	background-color: #f4f4f4;
	cursor: pointer;
}	
.sku-list-item:hover>i{
	display: inline-block;
}
.sku-list-item:hover>font{
	display: none;
}
</style>
